<template>
	<view class="container">
		<!-- 地图区域 -->
		<view class="map-container">
			<view class="ditu">
				<map :latitude="latitude" :longitude="longitude" scale="14"></map>
			</view>
		</view>

		<!-- 商家信息区域 -->
		<view class="info-container">
			<view class="info-title">车百事汽车生活馆</view>
			<view class="info-address">山西省太原市人民路与解放路交叉口</view>
			<view class="info-distance">556m</view>
		</view>

		<!-- 导航按钮 -->
		<view class="button-container" @click="navigateToStore">
			<view class="navigate-button">导航</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				//维度
				latitude: "",
				//经度
				longitude: ""
			}
		},
		onReady() {
			this.getMyPosition()
		},
		methods: {
			navigateToStore() {
				// 导航逻辑
				console.log("导航到商家");
			},
			getMyPosition() {
				const that = this;
				uni.getLocation({
					success(resp) {
						console.log(resp);
						that.latitude = resp.latitude
						that.longitude = resp.longitude
					}
				})
			},
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 93vh;
		/* 使容器充满整个视口 */
	}

	.header {
		background-color: #3385FD;
		/* 顶部蓝色背景 */
		padding: 20rpx;
		/* 内边距 */
		text-align: center;
		/* 文本居中 */
	}

	.header-title {
		color: white;
		/* 文字颜色 */
		font-size: 20rpx;
		/* 字体大小 */
	}

	.map-container {
		flex: 1;
		/* 占据剩余空间 */
		position: relative;
		/* 相对定位 */
		background-color: white;
		/* 地图区域背景颜色 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.map-placeholder {
		width: 100%;
		/* 占满宽度 */
		height: 600rpx;

		/* 占满高度 */

	}

	.map-text {
		color: #888;
		/* 占位符文字颜色 */
		font-size: 16rpx;
		/* 字体大小 */
	}

	.info-container {
		padding: 10rpx;
		/* 内边距 */
		background-color: white;
		/* 背景颜色 */
		border-top: 1rpx solid #e0e0e0;
		/* 上边框 */
	}

	.info-title {
		font-size: 18px;
		/* 商家名称字体大小 */
		font-weight: 900;
		/* 加粗 */
	}

	.info-address {
		font-size: 14px;
		/* 地址字体大小 */
		color: #666;
		/* 地址颜色 */
	}

	.info-distance {
		font-size: 12px;
		/* 距离字体大小 */
		color: #999;
		/* 距离颜色 */
	}

	.button-container {
		padding: 10rpx;
		/* 内边距 */
		margin-top: 100rpx;
	}

	.navigate-button {
		background-color: #3385FD;
		/* 按钮背景颜色 */
		color: white;
		/* 按钮文字颜色 */
		padding: 10rpx;
		/* 内边距 */
		text-align: center;
		/* 文本居中 */
		border-radius: 5rpx;
		/* 圆角 */
		cursor: pointer;
		/* 鼠标指针样式 */
		z-index: 10;
	}

	.ditu {
		width: 100%;
		height: 900rpx;
		background-color: white;
	}

	.ditu>map {
		width: 100%;
		height: 100%;
	}
</style>